<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>操作元素</title>
    <style>
        div,
        p{
            width: 300px;
            height: 30px;
            line-height: 30px;
            color: #fff;
            background-color: pink;
        }
    </style>
</head>
<body>
         <button>显示当前系统时间</button>
        <div>某个时间</div>

        <p>123</p> 

        <script>
            /*   inner 里面的  text 文本
            改变元素内容：
                        element.innerText  从起始位置到终止位置的内容，但它去除 html 标签 同时空格和换行也会去掉 
                        element.innerHTML  起始位置到终止位置的全部内容，包括 html 标签 同时保留空格和换行

                        区别 ：innerText不识别html标签   innerHTML 可以识别 html标签
                               这两个属性是可读写的  可以获取里面的内容吧
            */
            //  当我们点击了按钮 ，div 里面的文字会发生变化
            // 1 获取元素
            var btn = document.querySelector('button');
            var div = document.querySelector('div');
            // 2 注册事件
            btn.onclick = function(){
                div.innerText = getDate();
            }

            function getDate(){
                var date = new Date();
                var year = date.getFullYear();
                var month = date.getMonth() + 1;
                var dates = date.getDate();
                var arr = ['星期日','星期一','星期二', '星期三', '星期四', ' 星期五','星期六']
                var day = date.getDay();
                return ('今天是：' + year + '年' + month + '月' + dates + '日' + '星期' + arr[day]); // 核心是 arr[day]
            }

            //  我们元素可以不用添加事件  页面加载直接显示时间
            var p = document.querySelector('p');
            p.innerText = getDate();
        </script>


           <!-- 
               常用元素的属性操作
                1 innerText  innerHTML 改变元素内容
                2 src  href
                3 id alt title
            -->
            <button id="ldh">刘德华</button>
            <button id="zxy">张学友</button>
            <img src="/1.jpg" alt="" title="二十五，二十一">

            <script>
                //  修改元素内容 
                // 1 获取元素
                var ldh = document.getElementById('ldh');
                var zxy = document.getElementById('zxy');
                var img = document.querySelector('img');
                // 2 注册事件 处理程序
                zxy.onclick = function(){
                    img.src = '/2.jpg';
                    img.title = '拉稀度';
                }
                ldh.onclick = function(){
                    img.src = '/1.jpg';
                    img.title = "二十五，二十一";
                }
            </script>
</body>
</html>